<template>
	<view class="container">
		<view class="tab">
			<view :class="['t-item', tab_index==1?'select':'']" @click="tab_index=1">
				<text>商品</text>
			</view>
			<!-- <view :class="['t-item', tab_index==2?'select':'']" @click="tab_index=2">
				<text>服务</text>
			</view> -->
			<!-- <view :class="['t-item', tab_index==3?'select':'']" @click="tab_index=3">
				<text>课程</text>
			</view> -->
			<view class="style-img">
				<image v-if="box_style==1" @click="box_style=2" :src="$img_path('/course/s_i_1.png')" mode="widthFix">
				</image>
				<!-- <image v-if="box_style==2" @click="box_style=1" :src="$img_path('/course/s_i_2.png')" mode="widthFix">
				</image> -->
			</view>
		</view>

		<!-- 商品足迹 -->
		<view class="list_1" v-if="tab_index==1" :style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<!-- <view class="time">
					5月20日
				</view> -->
				<view class="goodsList">
					<view class="item-box" :class="box_style==2 ? 'column-class' : 'row-class' "
						v-for="(item,i) in course_list" :style="{width: box_style==2 ? '100%' : '344rpx'}" :key="i">
						<goodsItem :styleType="box_style" :goodsDetail="item.goods"
							:imageStyle="{width:box_style==2 ? '260rpx' : '344rpx',height:box_style==2 ? '260rpx' : '344rpx'}">
							<text slot="center"
								style="margin-top: 16rpx;display: block;">销量：{{item.goods.sales}}</text>
							<view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
								<view class="tag-item">
									标签
								</view>
							</view>
						</goodsItem>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务足迹 -->
		<view class="list_1 list_2" v-if="tab_index==2"
			:style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<view class="time">
					5月20日
				</view>
				<view class="goodsList">
					<view class="item-box" :class="box_style==2 ? 'column-class' : 'row-class' "
						v-for="(item,i) in course_list" :style="{width: box_style==2 ? '100%' : '344rpx'}">
						<goodsItem :styleType="box_style" :box_bg="box_style==2?'#FFFFFF':'#FFFFFF00'"
							:imageStyle="{width:box_style==2 ? '324rpx' : '344rpx',height:box_style==2 ? '232rpx' : '246rpx'}">
							<text slot="center" style="margin-top: 16rpx;display: block;">销量：1000</text>
							<view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
								<view class="tag-item">
									标签
								</view>
							</view>
							<view slot="priceBox" class="priceBox">
								<view class="price">
									<text>¥ 100</text>
									<text>/台</text>
								</view>
								<view class="n">
									￥150
								</view>
							</view>
						</goodsItem>
					</view>
				</view>
			</view>
		</view>

		<!-- 课程足迹 -->
		<view class="list_1 list_3" v-if="tab_index==3"
			:style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<view class="time">
					5月20日
				</view>
				<view class="goodsList">
					<view class="item-box" v-for="(item,i) in course_list" :key="i"
						:style="{width: box_style==2 ? '100%' : '344rpx'}">
						<courseItem :styleType="box_style" :box_bg="box_style==2?'#FFFFFF':'#FFFFFF00'"
							:imageStyle="{width:box_style==2 ? '260rpx' : '344rpx',height:box_style==2 ? '260rpx' : '246rpx'}">
							<text slot="center"
								style="margin-top: 16rpx;display: block;font-weight: 400;font-size: 24rpx;color: #0291FF;line-height: 34rpx;">100人已报名</text>
						</courseItem>
					</view>
				</view>
			</view>
		</view>


		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong"></div>
		<view class="bottom position-fixed display-flex alig  ">
			<view class="padding-about-34 width-100 display-flex alig center">
				<view class="display-flex alig">
					<view @click="login()" class="button text-center color-FFF font-size-26"
						style="padding: 20rpx 286rpx;">
						清空
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		footprint
	} from '@/utils/api/index.js'
	import goodsItem from '@/components/service-box/mall-item-box.vue'
	import courseItem from '@/components/service-box/goods-box.vue'
	export default {
		components: {
			goodsItem,
			courseItem
		},
		data() {
			return {
				box_style: 1,
				tab_index: 1,

				course_list: [],
				c_page: 1,
				c_total: 0,
				c_last_page: 0,
				pagingState: false,
				page: 1
			}
		},
		onShow() {
			this.footprints()
		},
		methods: {
			// 课程
			async footprints() {
				let object = {
					page: this.page,
					type: 'goods'
				}
				if (!this.pagingState) {
					const {
						code,
						data
					} = await footprint()

					this.course_list = this.course_list.concat(data.data)
					if (data.current_page == data.last_page) {
						this.pagingState = true
						return
					}
					this.page++
				}
				// footprint({page:this.c_page}).then(res=>{
				// 	if(this.c_page==1){
				// 		this.course_list = res.data.data.map( item => {
				// 			item.price = item.course.salesprice;
				// 			return item
				// 		})
				// 	}else{
				// 		this.course_list = [...this.course_list,...res.data.data]
				// 	}
				// 	this.c_total = res.data.total
				// 	this.c_last_page = res.data.last_page
				// 	console.log(this.course_list)
				// })
			}
		},
		onReachBottom() {
			this.footprints()
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.tab {
			position: fixed;
			left: 0;
			right: 0;
			top: -1rpx;
			width: 100%;
			height: 88rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx;
			box-sizing: border-box;
			z-index: 5;

			.t-item {
				text {
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					line-height: 42rpx;
				}

				&.select {
					text {
						color: #333333;
						position: relative;

						&::before {
							content: '';
							width: 60rpx;
							height: 4rpx;
							background: #E72A2A;
							border-radius: 2rpx;
							position: absolute;
							top: calc(100% + 10rpx);
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}

			.style-img {
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.list_1 {
			padding-top: 88rpx;
			background-color: #FFFFFF;
			padding: 88rpx 22rpx 0;
			box-sizing: border-box;

			.time-list {
				.time {
					padding: 40rpx 0 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.goodsList {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item-box {
						box-sizing: border-box;

						// margin-bottom: 14rpx;
						&.column-class {
							padding: 20rpx 0;
							border-bottom: 2rpx solid #F8F8F8;

							&:first-child {
								padding-top: 0;
							}
						}

						&.row-class {
							border: 2rpx solid #F3F3F3;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
						}

						.tagList {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							.tag-item {
								// width: 118rpx;
								height: 34rpx;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								border: 2rpx solid #0291FF;
								font-weight: 400;
								font-size: 20rpx;
								color: #0291FF;
								// line-height: 34rpx;
								text-align: center;
								padding: 3rpx 12rpx;
								box-sizing: border-box;
								margin-left: 12rpx;

								&:first-child {
									background: #FF6602;
									border-color: #FF6602;
									color: #FFFFFF;
									margin-left: 0;
								}
							}
						}

					}
				}
			}

		}

		.list_2 {
			.goodsList {
				.priceBox {
					display: flex;
					align-items: flex-end;

					.price {
						text:first-child {
							font-weight: 900;
							font-size: 42rpx;
							color: #FF2E2E;
							line-height: 58rpx;
						}

						text:last-child {
							font-weight: 400;
							font-size: 20rpx;
							color: #FF4A4A;
							line-height: 48rpx;
						}
					}

					.n {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
						margin-left: 16rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		.list_3 {}

	}

	.tans {
		padding: 4rpx 20rpx;
		font-size: 18rpx;
		border-radius: 6rpx;
	}

	.bottom {
		bottom: 0;
		width: 750rpx;
		height: 134rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.view {
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>